<template>
  <div>
    <div class="goback" @click="handleGoback"></div>
    <div class="main-count">
      <div class="main-count-top">
        <!-- 视频观看人次 -->
        <div class="main-count-item">
          <div class="main-content-item-title">视频观看人次</div>
          <div class="main-content-item-content">
            <div class="videoWatchNum">
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">累计</span>
                </div>
                <div class="num-count">
                  <CountTo :value="videoWatchNum.sum" :duration="2000" />
                </div>
              </div>
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">本月</span>
                </div>
                <div class="num-count">
                  <CountTo :value="videoWatchNum.currentMonth" :duration="2000" />
                </div>
              </div>
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">今日</span>
                </div>
                <div class="num-count">
                  <CountTo :value="videoWatchNum.today" :duration="2000" />
                </div>
              </div>
            </div>
            <topOne />
          </div>
        </div>
        <!-- 本月最受好评 -->
        <div class="main-count-item">
          <div class="main-content-item-title">本月最受好评</div>
          <div class="main-content-item-content">
            <div class="item-content">
              <div class="main-content">
                <div class="list-th">
                  <div class="list-td">企业名称</div>
                  <div class="list-td">星级</div>
                  <div class="list-td">好评率</div>
                </div>
                <div class="new-check-list">
                  <div class="no-list">暂无评价</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 本月有待提升 -->
        <div class="main-count-item">
          <div class="main-content-item-title">本月有待提升</div>
          <div class="main-content-item-content">
            <div class="item-content">
              <div class="main-content">
                <div class="list-th">
                  <div class="list-td">企业名称</div>
                  <div class="list-td">星级</div>
                  <div class="list-td">好评率</div>
                </div>
                <div class="new-check-list">
                  <div class="no-list">暂无评价</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 评价统计 -->
      <div class="main-count-bottom">
        <div class="main-count-item">
          <div class="main-content-item-title">评价统计</div>
          <div class="main-content-item-content">
            <div class="videoWatchNum">
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">累计</span>
                </div>
                <div class="num-count">
                  <CountTo :value="commentsNum.sum" :duration="2000" />
                </div>
              </div>
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">本月</span>
                </div>
                <div class="num-count">
                  <CountTo :value="commentsNum.currentMonth" :duration="2000" />
                </div>
              </div>
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">本周</span>
                </div>
                <div class="num-count">
                  <CountTo :value="commentsNum.currentWeek" :duration="2000" />
                </div>
              </div>
              <div class="num-item">
                <div class="num-field">
                  <span class="circle"></span>
                  <span class="desc">今日</span>
                </div>
                <div class="num-count">
                  <CountTo :value="commentsNum.today" :duration="2000" />
                </div>
              </div>
            </div>
            <bottomTwo />
          </div>
        </div>
        <!-- 最新检查 -->
        <div class="last-item">
          <div class="main-content-item-title">最新评价</div>
          <div class="list-th th-th">
            <div class="list-td title">时间</div>
            <div class="list-td title">企业名称</div>
            <div class="list-td title">星级</div>
            <div class="list-td title">内容</div>
          </div>
          <div class="main-content-item-content">
            <div class="main-content last-content">
              <issueList :data="list" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import CountTo from '@/components/CountTo/index.vue';
import topOne from "@/view/assetIssueDetail/Appendcharts/topOne/index.vue";
import bottomTwo from "@/view/assetIssueDetail/Appendcharts/bottomTwo/index.vue";
import issueList from "@/components/issueList/index.vue";
import { getVideoViews,getComments } from "@/api/IssueData";

const router = useRouter();
function handleGoback() {
  router.push({ name: "homePage" });
}

const videoWatchNum = reactive({
  sum: 0,
  currentMonth: 0,
  today: 0,
})

const commentsNum = reactive({
  sum: 0,
  currentMonth: 0,
  currentWeek: 0,
  today: 0,
})

// 观看人次
const list = ref([
  {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  }, {
    time: "2025-01-12 17:17:57",
    name: "医药高新区九田之家烤肉店",
    star: 5,
    comment: "--"
  },
]);

onMounted(async () => {
  const result = await getVideoViews();
  videoWatchNum.sum = result.data.total;
  videoWatchNum.currentMonth = result.data.currentMonth;
  videoWatchNum.today = result.data.today;

  const result2 = await getComments();
  commentsNum.sum = result2.data.total;
  commentsNum.currentMonth = result2.data.currentMonth;
  commentsNum.currentWeek = result2.data.currentWeek;
  commentsNum.today = result2.data.today;
})


</script>

<style scoped>
.goback {
  width: 7.395833vw;
  height: 1.510417vw;
  background: url("@/assets/gobackBtn.png") 50% no-repeat;
  background-size: 100% 100%;
  margin-left: 1vw;
  margin-bottom: 1vw;
  cursor: pointer;
}

.main-count {
  width: 100%;
  height: calc(100vw - 56vw);
}

.main-count-top,
.main-count-bottom {
  display: flex;
  justify-content: space-around;
  /* 主轴上的对齐方式，这里让项目平分容器宽度 */
  align-items: center;
  /* 侧轴上的对齐方式，让项目垂直居中 */
  width: 100%;
  /* 假设你希望容器占据全部可用宽度 */
  height: calc((100vw - 56vw) / 2);
  margin-bottom: 0.4vw;
}

.main-count-item {
  flex: 1;
  /* 让每个项目都能等分剩余空间 */
  margin: 0.3vw;
  /* 根据需要调整项目的外边距 */
  max-width: 33.33%;
  /* 确保每个项目最多占据1/3宽度 */
  box-sizing: border-box;
  /* 确保padding和border被包含在width内 */
  height: 100%;
  background-image: url("../../assets/bgitem.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 0.5vw 1vw;
}

.main-content-item-content {
  width: calc((100% - 0.29167vw));
  height: 80%;
  margin-top: 0.3vw;
}

.main-content-item-title {
  width: 12vw;
  height: 1.666667vw;
  line-height: 1.25vw;
  padding-left: 0.520833vw;
  font-size: 1.25vw;
  font-family: homeTime;
  color: #fff;
  text-align: left;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  letter-spacing: 0.104167vw;
  background: url("../../assets//home/titlebase.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0.66vw;
}

.last-item {
  flex: 1;
  /* 让每个项目都能等分剩余空间 */
  margin: 0.3vw;
  /* 根据需要调整项目的外边距 */
  box-sizing: border-box;
  /* 确保padding和border被包含在width内 */
  height: 100%;
  background-image: url("../../assets/longBody.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 0.5vw 1vw;
  overflow: hidden;
}

/* 这里内容超出，要设置自动滚动 */
.last-item .main-content-item-content {
  overflow: hidden;
}

.item-content .main-content {
  display: flex;
  flex-direction: column;
  padding: 1vw;
  color: white;
  height: 93%;
}


.list-th {
  display: flex;
  justify-content: space-around;
}

.main-count-bottom .last-item .list-th.th-th {
  padding: 0 1vw;
}

.main-count-bottom .list-th .list-td.title {
  color: #e6f7ff;
  font-size: 1.1vw;
  width: 100%;
  text-align: center;
}

.main-count-bottom .last-item .main-content-item-content .main-content.last-content {
  padding-top: 0;
  overflow: scroll;
  height: 17vw;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.main-count-bottom .last-item .main-content-item-content .main-content.last-content::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.videoWatchNum {
  display: flex;
  justify-content: space-between;
  height: 4.2vw;
  align-items: center;
}

.videoWatchNum .num-item {
  width: 100%;
  color: #fff;
  text-align: center;
}

.videoWatchNum .num-item .circle {
  display: inline-block;
  width: 0.5vw;
  height: 0.5vw;
  border-radius: 50%;
  border: 1px solid #54e5fc;
  margin-right: 0.52vw;
}

.videoWatchNum .num-item .num-count {
  letter-spacing: 0.104167vw;
  text-shadow: 0 0 0.364583vw rgba(58, 178, 231, 0.67);
  font-size: 1.25vw;
  font-family: homeTime;
  color: #54e5fc;
}

.no-list {
  text-align: center;
  font-size: 0.8vw;
  margin-top: 0.5vw;
  color: #d5d2d2;
}
</style>
